<!-- HTML header for doxygen 1.8.6-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<meta name="generator" content="Doxygen 1.8.13"/>
<title>OpenCV: Using OpenCV.js</title>
<link href="../../opencv.ico" rel="shortcut icon" type="image/x-icon" />
<link href="../../tabs.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../jquery.js"></script>
<script type="text/javascript" src="../../dynsections.js"></script>
<script type="text/javascript" src="../../tutorial-utils.js"></script>
<link href="../../search/search.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../../search/searchdata.js"></script>
<script type="text/javascript" src="../../search/search.js"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    extensions: ["tex2jax.js", "TeX/AMSmath.js", "TeX/AMSsymbols.js"],
    jax: ["input/TeX","output/HTML-CSS"],
});
//<![CDATA[
MathJax.Hub.Config(
{
  TeX: {
      Macros: {
          matTT: [ "\\[ \\left|\\begin{array}{ccc} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{array}\\right| \\]", 9],
          fork: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ \\end{array} \\right.", 4],
          forkthree: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ \\end{array} \\right.", 6],
          forkfour: ["\\left\\{ \\begin{array}{l l} #1 & \\mbox{#2}\\\\ #3 & \\mbox{#4}\\\\ #5 & \\mbox{#6}\\\\ #7 & \\mbox{#8}\\\\ \\end{array} \\right.", 8],
          vecthree: ["\\begin{bmatrix} #1\\\\ #2\\\\ #3 \\end{bmatrix}", 3],
          vecthreethree: ["\\begin{bmatrix} #1 & #2 & #3\\\\ #4 & #5 & #6\\\\ #7 & #8 & #9 \\end{bmatrix}", 9],
          cameramatrix: ["#1 = \\begin{bmatrix} f_x & 0 & c_x\\\\ 0 & f_y & c_y\\\\ 0 & 0 & 1 \\end{bmatrix}", 1],
          distcoeffs: ["(k_1, k_2, p_1, p_2[, k_3[, k_4, k_5, k_6 [, s_1, s_2, s_3, s_4[, \\tau_x, \\tau_y]]]]) \\text{ of 4, 5, 8, 12 or 14 elements}"],
          distcoeffsfisheye: ["(k_1, k_2, k_3, k_4)"],
          hdotsfor: ["\\dots", 1],
          mathbbm: ["\\mathbb{#1}", 1],
          bordermatrix: ["\\matrix{#1}", 1]
      }
  }
}
);
//]]>
</script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js"></script>
<link href="../../doxygen.css" rel="stylesheet" type="text/css" />
<link href="../../stylesheet.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="top"><!-- do not remove this div, it is closed by doxygen! -->
<div id="titlearea">
<!--#include virtual="/google-search.html"-->
<table cellspacing="0" cellpadding="0">
 <tbody>
 <tr style="height: 56px;">
  <td id="projectlogo"><img alt="Logo" src="../../opencv-logo-small.png"/></td>
  <td style="padding-left: 0.5em;">
   <div id="projectname">OpenCV
   &#160;<span id="projectnumber">4.5.2</span>
   </div>
   <div id="projectbrief">Open Source Computer Vision</div>
  </td>
 </tr>
 </tbody>
</table>
</div>
<!-- end header part -->
<!-- Generated by Doxygen 1.8.13 -->
<script type="text/javascript">
var searchBox = new SearchBox("searchBox", "../../search",false,'Search');
</script>
<script type="text/javascript" src="../../menudata.js"></script>
<script type="text/javascript" src="../../menu.js"></script>
<script type="text/javascript">
$(function() {
  initMenu('../../',true,false,'search.php','Search');
  $(document).ready(function() { init_search(); });
});
</script>
<div id="main-nav"></div>
<!-- window showing the filter options -->
<div id="MSearchSelectWindow"
     onmouseover="return searchBox.OnSearchSelectShow()"
     onmouseout="return searchBox.OnSearchSelectHide()"
     onkeydown="return searchBox.OnSearchSelectKey(event)">
</div>

<!-- iframe showing the search results (closed by default) -->
<div id="MSearchResultsWindow">
<iframe src="javascript:void(0)" frameborder="0" 
        name="MSearchResults" id="MSearchResults">
</iframe>
</div>

<div id="nav-path" class="navpath">
  <ul>
<li class="navelem"><a class="el" href="../../d5/d10/tutorial_js_root.html">OpenCV.js Tutorials</a></li><li class="navelem"><a class="el" href="../../df/df7/tutorial_js_table_of_contents_setup.html">Introduction to OpenCV.js</a></li>  </ul>
</div>
</div><!-- top -->
<div class="header">
  <div class="headertitle">
<div class="title">Using OpenCV.js </div>  </div>
</div><!--header-->
<div class="contents">
<div class="textblock"><h2>Steps </h2>
<p>In this tutorial, you will learn how to include and start to use <code>opencv.js</code> inside a web page. You can get a copy of <code>opencv.js</code> from <code>opencv-{VERSION_NUMBER}-docs.zip</code> in each <a href="https://github.com/opencv/opencv/releases">release</a>, or simply download the prebuilt script from the online documentations at "https://docs.opencv.org/{VERSION_NUMBER}/opencv.js" (For example, <a href="https://docs.opencv.org/3.4.0/opencv.js">https://docs.opencv.org/3.4.0/opencv.js</a>. Use <code>master</code> if you want the latest build). You can also build your own copy by following the tutorial on Build Opencv.js.</p>
<h3>Create a web page</h3>
<p>First, let's create a simple web page that is able to upload an image.</p>
<div class="fragment"><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;head&gt;</div><div class="line">&lt;meta charset=&quot;utf-8&quot;&gt;</div><div class="line">&lt;title&gt;Hello OpenCV.js&lt;/title&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;h2&gt;Hello OpenCV.js&lt;/h2&gt;</div><div class="line">&lt;div&gt;</div><div class="line">  &lt;div class=&quot;inputoutput&quot;&gt;</div><div class="line">    &lt;img id=&quot;imageSrc&quot; alt=&quot;No Image&quot; /&gt;</div><div class="line">    &lt;div class=&quot;caption&quot;&gt;imageSrc &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; name=&quot;file&quot; /&gt;&lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">let imgElement = document.getElementById(&quot;imageSrc&quot;)</div><div class="line">let inputElement = document.getElementById(&quot;fileInput&quot;);</div><div class="line">inputElement.addEventListener(&quot;change&quot;, (e) =&gt; {</div><div class="line">  imgElement.src = URL.createObjectURL(e.target.files[0]);</div><div class="line">}, false);</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></div><!-- fragment --><p>To run this web page, copy the content above and save to a local index.html file. To run it, open it using your web browser.</p>
<dl class="section note"><dt>Note</dt><dd>It is a better practice to use a local web server to host the index.html.</dd></dl>
<h3>Include OpenCV.js</h3>
<p>Set the URL of <code>opencv.js</code> to <code>src</code> attribute of &lt;script&gt; tag.</p>
<dl class="section note"><dt>Note</dt><dd>For this tutorial, we host <code>opencv.js</code> at same folder as index.html. You can also choose to use the URL of the prebuilt <code>opencv.js</code> in our online documentation.</dd></dl>
<p>Example for synchronous loading: </p><div class="fragment"><div class="line">&lt;script src=&quot;opencv.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</div></div><!-- fragment --><p>You may want to load <code>opencv.js</code> asynchronously by <code>async</code> attribute in &lt;script&gt; tag. To be notified when <code>opencv.js</code> is ready, you can register a callback to <code>onload</code> attribute.</p>
<p>Example for asynchronous loading </p><div class="fragment"><div class="line">&lt;script async src=&quot;opencv.js&quot; onload=&quot;onOpenCvReady();&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</div></div><!-- fragment --><h3>Use OpenCV.js</h3>
<p>Once <code>opencv.js</code> is ready, you can access OpenCV objects and functions through <code>cv</code> object.</p>
<p>For example, you can create a <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a> from an image by <a class="el" href="../../d4/da8/group__imgcodecs.html#ga288b8b3da0892bd651fce07b3bbd3a56" title="Loads an image from a file. ">cv.imread</a>.</p>
<dl class="section note"><dt>Note</dt><dd>Because image loading is asynchronous, you need to put <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a> creation inside the <code>onload</code> callback.</dd></dl>
<div class="fragment"><div class="line">imgElement.onload = function() {</div><div class="line">  let mat = cv.imread(imgElement);</div><div class="line">}</div></div><!-- fragment --><p>Many OpenCV functions can be used to process <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a>. You can refer to other tutorials, such as <a class="el" href="../../d2/df0/tutorial_js_table_of_contents_imgproc.html">Image Processing</a>, for details.</p>
<p>In this tutorial, we just show a <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a> on screen. To show a <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a>, you need a canvas element.</p>
<div class="fragment"><div class="line">&lt;canvas id=&quot;outputCanvas&quot;&gt;&lt;/canvas&gt;</div></div><!-- fragment --><p>You can use <a class="el" href="../../d7/dfc/group__highgui.html#ga453d42fe4cb60e5723281a89973ee563" title="Displays an image in the specified window. ">cv.imshow</a> to show <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a> on the canvas. </p><div class="fragment"><div class="line">cv.imshow(&quot;outputCanvas&quot;, mat);</div></div><!-- fragment --><p>Putting all of the steps together, the final index.html is shown below.</p>
<div class="fragment"><div class="line">&lt;!DOCTYPE html&gt;</div><div class="line">&lt;html&gt;</div><div class="line">&lt;head&gt;</div><div class="line">&lt;meta charset=&quot;utf-8&quot;&gt;</div><div class="line">&lt;title&gt;Hello OpenCV.js&lt;/title&gt;</div><div class="line">&lt;/head&gt;</div><div class="line">&lt;body&gt;</div><div class="line">&lt;h2&gt;Hello OpenCV.js&lt;/h2&gt;</div><div class="line">&lt;p id=&quot;status&quot;&gt;OpenCV.js is loading...&lt;/p&gt;</div><div class="line">&lt;div&gt;</div><div class="line">  &lt;div class=&quot;inputoutput&quot;&gt;</div><div class="line">    &lt;img id=&quot;imageSrc&quot; alt=&quot;No Image&quot; /&gt;</div><div class="line">    &lt;div class=&quot;caption&quot;&gt;imageSrc &lt;input type=&quot;file&quot; id=&quot;fileInput&quot; name=&quot;file&quot; /&gt;&lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">  &lt;div class=&quot;inputoutput&quot;&gt;</div><div class="line">    &lt;canvas id=&quot;canvasOutput&quot; &gt;&lt;/canvas&gt;</div><div class="line">    &lt;div class=&quot;caption&quot;&gt;canvasOutput&lt;/div&gt;</div><div class="line">  &lt;/div&gt;</div><div class="line">&lt;/div&gt;</div><div class="line">&lt;script type=&quot;text/javascript&quot;&gt;</div><div class="line">let imgElement = document.getElementById(&#39;imageSrc&#39;);</div><div class="line">let inputElement = document.getElementById(&#39;fileInput&#39;);</div><div class="line">inputElement.addEventListener(&#39;change&#39;, (e) =&gt; {</div><div class="line">  imgElement.src = URL.createObjectURL(e.target.files[0]);</div><div class="line">}, false);</div><div class="line"></div><div class="line">imgElement.onload = function() {</div><div class="line">  let mat = cv.imread(imgElement);</div><div class="line">  cv.imshow(&#39;canvasOutput&#39;, mat);</div><div class="line">  mat.delete();</div><div class="line">};</div><div class="line"></div><div class="line">function onOpenCvReady() {</div><div class="line">  document.getElementById(&#39;status&#39;).innerHTML = &#39;OpenCV.js is ready.&#39;;</div><div class="line">}</div><div class="line">&lt;/script&gt;</div><div class="line">&lt;script async src=&quot;opencv.js&quot; onload=&quot;onOpenCvReady();&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</div><div class="line">&lt;/body&gt;</div><div class="line">&lt;/html&gt;</div></div><!-- fragment --><dl class="section note"><dt>Note</dt><dd>You have to call delete method of <a class="el" href="../../d3/d63/classcv_1_1Mat.html" title="n-dimensional dense array class ">cv.Mat</a> to free memory allocated in Emscripten's heap. Please refer to <a href="https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html#memory-management">Memory management of Emscripten</a> for details.</dd></dl>
<h2>Try it </h2>
<p> 
<iframe src="../../js_setup_usage.html" width="100%"
        onload="this.style.height=this.contentDocument.body.scrollHeight +'px';">
</iframe>
 </p>
</div></div><!-- contents -->
<!-- HTML footer for doxygen 1.8.6-->
<!-- start footer part -->
<hr class="footer"/><address class="footer"><small>
Generated on Fri Apr 2 2021 11:36:37 for OpenCV by &#160;<a href="http://www.doxygen.org/index.html">
<img class="footer" src="../../doxygen.png" alt="doxygen"/>
</a> 1.8.13
</small></address>
<script type="text/javascript">
//<![CDATA[
addTutorialsButtons();
//]]>
</script>
</body>
</html>
